import React, { useEffect, useState } from 'react'
import { NavBar, Card, Grid } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import dayjs from 'dayjs' // You'll need to install dayjs: npm install dayjs

export default function History() {
    const navigate = useNavigate()
    const [historyItems, setHistoryItems] = useState([])
    
    const back = () => {
        navigate(-1)
    }
    
    useEffect(() => {
        // Load history from localStorage
        const history = JSON.parse(localStorage.getItem("viewHistory") || "[]");
        // Sort by most recent view first
        const sortedHistory = history.sort((a, b) => 
            new Date(b.viewDate) - new Date(a.viewDate)
        );
        setHistoryItems(sortedHistory);
    }, []);
    
    const formatDate = (dateString) => {
        return dayjs(dateString).format('YYYY-MM-DD HH:mm');
    }
    
    const groupByDate = () => {
        const grouped = {};
        historyItems.forEach(item => {
            const date = dayjs(item.viewDate).format('YYYY-MM-DD');
            if (!grouped[date]) {
                grouped[date] = [];
            }
            grouped[date].push(item);
        });
        return grouped;
    }
    
    const groupedHistory = groupByDate();

    return (
        <div style={{ padding: '0 16px' }}>
            <NavBar onBack={back}>浏览历史</NavBar>
            
            <h2 style={{ margin: '16px 0', color: '#333' }}>历史浏览</h2>
            
            {Object.entries(groupedHistory).map(([date, items]) => (
                <div key={date} style={{ marginBottom: 24 }}>
                    <div style={{ 
                        fontSize: 16, 
                        fontWeight: 'bold', 
                        marginBottom: 12,
                        color: '#666'
                    }}>
                        {date}
                    </div>
                    
                    <Grid columns={2} gap={8}>
                        {items.map(item => (
                            <Grid.Item key={item._id}>
                                <Card 
                                    style={{ borderRadius: 8 }}
                                    onClick={() => {
                                        // Navigate to item detail if needed
                                    }}
                                >
                                    <img 
                                        src={item.img[0].url} 
                                        alt={item.title}
                                        style={{ 
                                            width: '100%', 
                                            height: 120,
                                            objectFit: 'cover',
                                            borderRadius: 4
                                        }}
                                    />
                                    <div style={{ padding: '8px 4px' }}>
                                        <div style={{ fontSize: 14 }}>{item.title}</div>
                                        <div style={{ 
                                            fontSize: 12, 
                                            color: '#999',
                                            marginTop: 4
                                        }}>
                                            浏览时间: {formatDate(item.viewDate)}
                                        </div>
                                    </div>
                                </Card>
                            </Grid.Item>
                        ))}
                    </Grid>
                </div>
            ))}
            
            {historyItems.length === 0 && (
                <div style={{ 
                    textAlign: 'center', 
                    color: '#999',
                    padding: '40px 0'
                }}>
                    暂无浏览历史
                </div>
            )}
        </div>
    )
}